<template>
	<view class="quan">
		<!-- 头部 -->
		<view class="top">
			<image src="/static/beijing.png" class="top_bj_img" />
			<view class="top_nav">
				<view class="top_left"  @tap="hui">
				<image class="left_img" src="/static/left2.png"></image>
				 </view>
			</view>
		</view>
		<!-- 申请登录浮动框 -->
		<view class="float">
				<form @submit="formSubmit" @reset="formReset">
					<view class="register_top">
						<view class="register_register" @tap="login_q(2)">欢迎注册</view>
					</view>
					<view class="register_name"><image src="/static/name.png" class="img"><input  type="text" name="name" placeholder="请输入您的昵称" /></view>
					<view class="register_tel"><image src="/static/tel.png" class="img"><input type="number" maxlength="11" name="tel" @input="login_tel" placeholder="请输入手机号码" /></view>
					<!-- <view class="register_Id"><image src="/static/id.png" class="img"><input  type="idcard" maxlength="18" name="Id" placeholder="请输入您的身份证号" /></view> -->
					<view class="register_ytel"><image src="/static/yqr.png" class="img"><input type="number" maxlength="11" name="ytel" :value="yqr" placeholder="请输入邀请人手机号" /></view>
					<view class="register_yzm"><image src="/static/yzm.png" class="img"><input class="yzm" type="text" name="yzm" placeholder="请输入验证码" />
					<view v-if="show_yzm">
						<view class="yzm_btn" @tap="yzm">获取验证码</view>
					</view>
					<view v-else>
						<view class="yzm_btn2">剩余{{seconde}}s</view>
					</view>
					</view>
					<view class="register_pass"><image src="/static/mm.png" class="img"><input class="password" type="text" name="password" :password="look" placeholder="请输入您的密码" /><view class="look_btn" @tap="register_see" ><image class="yan" :src="yan"/></view></view>
					<view class="xieyi" @tap="xieyi">注册即代表同意<span style="color:red">《ABC用户协议》</span></view>
					<view class="btn"><button type="primary" form-type="submit">注册</button></view>
				</form>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: 1,
				look: true,
				see: true,
				tel:'',
				yhxx:'',
				yqr:'',
				show_yzm:true,
				seconde:'60',
				yan:'/static/yan2.png',
							}
		},
		onLoad(option) {
			console.log("邀请人信息",option.yqr)
			this.yqr=option.yqr
		},
		methods: {

			hui: function() {
				console.log("点击")
				uni.navigateTo({  
					url: "../login/login"
				})
			},
			register_see: function() {
				this.look = !this.look
				if(this.look==false){
				this.yan='/static/yan.png'
				}else{
					this.yan='/static/yan2.png'
				}
			},
			xieyi:function(){
				uni.navigateTo({
					url:"../Agreement/Agreement"
				})
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				console.log(e.detail.value)
				this.yhxx=e.detail.value
				var content=this.yhxx
				console.log("定义后",content)
				uni.request({
						url: 'http://tuiguang.yiyunoto.com/api/login/register',
						method:'POST',
						headers:{'Content-Type':'application/json'},
						data:{tname:content.name,
								phone:content.tel,
								carid:'',
								pwd:content.password,
								code:content.yzm,
								parentsid:content.ytel
								},
						success: (res) => {
						console.log("成功数据",res)
						this.$api.msg(res.data.msg);
						if(res.data.msg == "注册成功"){
							uni.navigateTo({
								url:"../login/login"
							})
						}
						console.log(res.data.data);
						},
						fail:(res)=>{
							console.log("请求失败",res)
						}
					});
			},
			// 登录手机号
			login_tel:function(e){
				console.log(e.detail.value)
				this.tel=e.detail.value
			},
			
		yzm:function(){
			console.log("获取验证码",this.tel)
				const requestTask =uni.request({
						url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
						method:'POST',
						// headers:{'Content-Type':'application/json'},
						data:{
							phone:this.tel,
						},
							success: (res) => {
								this.$api.msg(res.data.msg);
								if(res.data.msg=="短信验证码发送成功"){
								this.show_yzm=false,
								setInterval(()=>{
									--this.seconde
								},1000)
								setTimeout(()=>{
									this.show_yzm=true,
									this.seconde=60},
									60000
								)}
						console.log("ya",res.data.msg)							// console.log(res.data.data);
						}
					});
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 400upx;
	}

	.top_bj_img {
		width: 100%;
		height: 100%;
		border-radius:0upx 0upx 100upx 100upx ;
	}

	.top_nav {
		width: 100%;
		height: 100upx;
		position: absolute;
		top: 20upx;
		padding-left: 20upx;
		padding-top: 50upx;
		box-sizing: border-box;
	}

	.top_left {
		magin: 20upx;
		width:60upx;
		height: 60upx;
		float: left;
	}
	.left_img{
		width:20upx;
		height: 40upx;
	}
	.top_center {
		text-align: center;
		color: #FFFFFF;
	}

	.float {
		width: 90%;
		box-shadow: 0upx 10upx 10upx #0C0800;
		border-radius: 10upx;
		margin-left: 5%;
		padding-bottom: 50upx;
		position: relative;
		top: -200upx;
		background: #FFFFFF;
	}

	/* 登录项浮动框 */
	.login_top {
		width: 90%;
		height: 180upx;
		margin: 0 auto;
	}
	.register {
		width: 30%;
		padding-bottom: 30upx;
		margin: 30upx 50upx;
		text-align: center;
		float: left;
	}
.img{
		width:50upx;
		height: 50upx;
		border-radius: 25upx;
		position: absolute;
		left: 70upx;
		float: left;
	}
	.login_tel {
		width: 80%;
		height: 100upx;
		padding: 100upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}

	/* 注册项浮动框 */
	.register_top {
		width: 80%;
		height: 80upx;
		margin: 0 auto;
	}
	.register_register {
		width: 80%;
		padding-bottom: 30upx;
		margin: 30upx 50upx;
		color:#007AFF;
		text-align: center;
		float: left;
	}

	.register_tel {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}
.register_name {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}
.register_Id {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}
.register_ytel {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}
	.register_yzm {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}

	.yzm {
		width: 60%;
		float: left;
	}

	.yzm_btn {
		width: 40%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: blue;

	}
	.yzm_btn2{
		width: 40%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: #DBDADA;
	}
	.register_pass {
		width: 80%;
		height: 100upx;
		padding: 80upx;
		margin-left: 10%;
		box-sizing: border-box;
		border-bottom: 2upx solid #DBDADA;
	}

	.password {
		width: 70%;
		float: left;
	}

	.look_btn {
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
	}
	.yan{
		width: 60upx;
		height: 40upx;
	}
	.xieyi{
		font-size: 20upx;
		color:blue;
		margin-top: 20upx;
		margin-left: 10%;
	}
	.btn {
		width: 80%;
		margin: 50upx auto;
	}

	
</style>
